<script setup lang="ts">
import { ref } from "vue";
import { userRegister } from "@/api/user/login";
import { useRouter } from "vue-router";
interface RegisterForm {
  email: string;
  username: string;
  nickname: string;
  password: string;
  confirmPassword: string;
}

const registerForm = ref<RegisterForm>({
  email: "",
  username: "",
  nickname: "",
  password: "",
  confirmPassword: "",
});

const rules = {
  email: [
    { required: true, message: "请输入邮箱地址", trigger: "blur" },
    {
      type: "email",
      message: "请输入正确的邮箱地址",
      trigger: ["blur", "change"],
    },
  ],
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  confirmPassword: [
    { required: true, message: "请再次输入密码", trigger: "blur" },
    {
      validator: (
        _rule: any,
        value: string,
        callback: (error?: Error) => void
      ) => {
        if (value !== registerForm.value.password) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
};

const formRef = ref(null); // 添加一个 ref 引用
const router = useRouter(); // 获取路由器实例

const onSubmit = () => {
  (formRef.value as any).validate(async (valid: boolean) => {
    if (valid) {
      try {
        const res = await userRegister(registerForm.value);
        console.log(res);
        // 注册成功后跳转到登录页
        router.push({ name: "Login" });
      } catch (error) {
        console.error("注册失败:", error);
      }
    } else {
      console.log("表单验证失败!");
      return false;
    }
  });
};
</script>

<template>
  <div class="register-container">
    <el-form
      ref="formRef"
      :model="registerForm"
      :rules="rules"
      class="register-form"
      label-width="80px"
      label-position="left"
    >
      <h3 style="text-align: center; margin-bottom: 20px">欢迎注册</h3>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="registerForm.email" placeholder="请输入邮箱" />
      </el-form-item>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="registerForm.username" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="registerForm.nickname" placeholder="请输入昵称" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="registerForm.password"
          type="password"
          placeholder="请输入密码"
        />
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input
          v-model="registerForm.confirmPassword"
          type="password"
          placeholder="请再次输入密码"
        />
      </el-form-item>
      <el-form-item style="margin-top: 30px">
        <el-button type="primary" @click="onSubmit" style="width: 100%"
          >注册</el-button
        >
      </el-form-item>
      <div style="text-align: center">
        <router-link
          :to="{ name: 'Login' }"
          style="color: #409eff; text-decoration: none"
        >
          没有账号，前往注册
        </router-link>
      </div>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.register-container {
  position: fixed; /* 确保占据整个视窗 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("https://plus.unsplash.com/premium_photo-1733306466041-cc55ded2553f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw1fHx8ZW58MHx8fHx8");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0; /* 确保背景在表单之下 */
}

.register-form {
  max-width: 400px;
  width: 100%;
  padding: 20px;
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.9);
  text-align: left;
  z-index: 1;
  :deep(.el-form-item__content) {
    width: calc(100% - 80px);
    margin-left: auto !important;
  }
  :deep(.el-input) {
    width: 100%;
  }
}

/* 直接修改输入框样式 */
.el-input__inner {
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  transition: all 0.3s;
  &:focus {
    border-color: #409eff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
  }
}

/* 修改按钮样式 */
.el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
  &:hover {
    background-color: #66b1ff;
    border-color: #66b1ff;
  }
}
</style>
